<template>
  <div>
    <el-table :data="datalist" style="width: 100%;" border
              :header-cell-style="{background:'#e1e4e5',color:'#80878f'}">
      <el-table-column align="center" label="ID" width="120">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="年级" width="120">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="年级编码" width="120">
        <template slot-scope="scope">
          {{ scope.row.kcode }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="学生数量" width="120">
        <template slot-scope="scope">
          {{ scope.row.classnum }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="组织结构" width="120">
        <template slot-scope="scope">
          {{ scope.row.organize_code }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="描述">
        <template slot-scope="scope">
          {{ scope.row.description }}
        </template>
      </el-table-column>
      <el-table-column align="center" label=操作>
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="dialogTitle[dialogType]"
      :visible.sync="dialogVisible"
      :close-on-click-modal=false
      top="5vh">

      <el-form
        ref=""
        :model="temper"
        :rules="rules"
        label-width="100px"
        style=" width: 80%; margin-left:50px;">
        <el-form-item label="组织架构：" prop="account">
          <el-input
            placeholder="请输入内容"
            v-model="tempOrganize.tenant_name"
            :disabled="true">
          </el-input>
        </el-form-item>

        <el-form-item label="年级：" prop="order">
          <el-select v-model="temper.kcode" @change="selectGrade" placeholder="请选择年级" style="width: 100%">
            <el-option v-for="(item,index) in GRADE_SYS"
                       :label="item.label"
                       :value="item.kcode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="绑定教室：" prop="">
          <el-select v-model="temper.room_code" @change="selectGrade" placeholder="请选择教室" style="width: 100%">
            <el-option v-for="(item,index) in GRADE_SYS"
                       :label="item.label"
                       :value="item.kcode"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="描述：" prop="describe">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="temper.description"
            maxlength="30"
            show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item>
          <div style="text-align:right;">
            <el-button type="danger" @click="cancelConsumer">取消</el-button>
            <el-button type="primary" @click="confirmConsumer(dialogType)">确认</el-button>
          </div>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>
</template>

<script>
import { deepClone } from '@/utils'
import { deleteGrade } from '@/api/grade'

const defaultClass = {
  id: '',
  kcode: '',//班级编码（唯一）规则：组织架构code+
  label: '',//对外显示名称
  grade_code: '',//年级编码
  organize_code: '',//组织架构code
  room_code: '',//教室编码，对应摄像头
  description: ''
}

export default {
  name: 'index',
  props:{
    datalist:{
      type:Array
    },
    tempOrganize:{
      type:Object
    }
  },
  data(){
    return{
      dialogTitle: ['创建', '编辑'],
      dialogVisible: false,
      dialogType: '0',

      temper: Object.assign({}, defaultClass),
    }
  },
  methods:{

    handleEdit(scope) {
      this.dialogType = '1'
      this.dialogVisible = true
      this.temper = deepClone(scope.row)
      this.$nextTick(() => {
      })
    },
    handleDelete({ $index, row }) {
      this.$confirm('确定要删除年级吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await deleteGrade(row.id)
          this.temperList.splice($index, 1)
          this.$message({
            type: 'success',
            message: 'Delete succed !'
          })
        })
        .catch(err => {
          console.error(err)
        })
    },


  },
}
</script>

<style scoped>

</style>
